<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2023/4/23
  Time: 15:45
  To change this template use File | Settings | File Templates.
--%>
<%--页面编码不能冲突--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>公共的导航条</title>
  <%--boostrap的样式js文件--%>
  <link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" />
  <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
  <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
  <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

</head>
<body>

<!--
            描述：菜单栏
        -->
<div class="container-fluid">
  <div class="col-md-4">
    <img src="${pageContext.request.contextPath}/img/logo2.png" />
  </div>
  <div class="col-md-5">
    <img src="${pageContext.request.contextPath}/img/header.png" />
  </div>
  <div class="col-md-3" style="padding-top:20px">

    <%--列表--%>

    <ul class="list-inline">
      <c:if test="${empty user}">
        <li><a href="${pageContext.request.contextPath}/jsp/login.jsp">登录</a></li>
        <li><a href="${pageContext.request.contextPath}/jsp/register.jsp">注册</a></li>
        <li><a href="#">购物车</a></li>
      </c:if>
      <c:if test="${not empty user}">
        <strong>${user.name}</strong><a href="${pageContext.request.contextPath}/user?methodName=logOut">【退出】</a>
        <stront><a href="${pageContext.request.contextPath}/order?methodName=getOrderListByPage&curPage=1&pSize=3">我的订单列表</a></stront>
      </c:if>

    </ul>
  </div>
</div>

<!--
    描述：导航条 nav 标签是boostrap提供的导航条组件
-->
<div class="container-fluid">
  <nav style="background-color: darkslategrey" class="navbar navbar-inverse">
    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">首页</a>
      </div>

      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul id="ulDaoHang" class="nav navbar-nav">

          <%--<li><a  class="daohang_a" href="product_list.htm">手机数码<span class="sr-only">(current)</span></a></li>
          <li><a  class="daohang_a" href="#">电脑办公</a></li>
          <li><a class="daohang_a" href="#">电脑办公</a></li>
          <li><a class="daohang_a" href="#">电脑办公</a></li>--%>
        </ul>
        <form class="navbar-form navbar-right" role="search">
          <div class="form-group">
            <input type="text" class="form-control" placeholder="Search">
          </div>
          <button type="submit" class="btn btn-default">Submit</button>
        </form>

      </div>
      <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
  </nav>
</div>

</body>
    <script>
      $(function (){
          //Jquery的页面载入事件
        //alert("页面载入事件触发") ;
        //通过id="ulDaoHang"获取Jquery的标签对象
        var $ul = $("#ulDaoHang") ;
        //alert($ul) ;
        //发送ajax
        $.ajax({

             url:"${pageContext.request.contextPath}/category?methodName=getAllCategory",
             type: "get",
             success:function(data){
               //服务器响应成功的回调函数 :date----服务器响应过来的数据json数据
               //[{"cname":"手机数码","cid":"1"},{"cname":"运动户外","cid":"172934bd636d485c98fd2d3d9cccd409"},{"cname":"电脑办公","cid":"2"},{"cname":"家具家居","cid":"3"},{"cname":"鞋靴箱包","cid":"4"},{"cname":"图书音像","cid":"5"},
               // {"cname":"aaaa","cid":"59f56ba6ccb84cb591c66298766b83b5"},{"cname":"母婴孕婴","cid"
               //将data遍历出来
               //Jquery对象访问的方法each(...){}
               //var $data = $(data) ;
               //alert($data) ;
             //data:后端响应过来的数据---解析js对象----将js对象 通过$(js对象),转换成Jq
              var data = JSON.parse(data) ;
              //alert($(data)) ;
              $(data).each(function(){ //转换成$(data)Jquery对象
                // alert(this.cname) ;
                $ul.append("<li><a href='${pageContext.request.contextPath}/product?methodName=getProductByPage&curPage=1&pSize=12&cid="+this.cid+"'>"+this.cname+"</a><span class='sr-only'>(current)</span><li>");
              })

             } ,
             dateType:"json"


        })

      })
    </script>
</html>
